<template>
  <div class="app-container">
    <el-card shadow="always">
      <el-row>
        <div class="one_button">
          <el-col class="right_button">
            <el-button type="success" icon="el-icon-edit" size="small" @click="dropClick">新增试题</el-button>
          </el-col>
        </div>
        <div class="first_row">
          <el-col style="height:60px" class="right_select">
            <span>学科</span>
            <el-select v-model="subjectValue" placeholder="请选择">
              <el-option
                v-for="(item,index) in tableData"
                :key="index"
                :label="item.subject"
                :value="item.subject"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>二级目录</span>
            <el-select v-model="twoSubjectValue" placeholder="请选择">
              <el-option
                v-for="(item,index) in twoSubjectValueArr"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>标签</span>
            <el-select v-model="label" placeholder="请选择">
              <el-option
                v-for="item in tagsValue"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col class="left_input">
            <span>关键字</span>
            <el-input v-model="keyword" class="catalogue" />
          </el-col>
        </div>
        <div class="two_row">
          <el-col style="height:60px" class="right_select">
            <span>试题类型</span>
            <el-select v-model="type" placeholder="请选择">
              <el-option
                v-for="item in questionType"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>难度</span>
            <el-select v-model="difficultyValue" placeholder="请选择">
              <el-option
                v-for="item in difficulty"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>方向</span>
            <el-select v-model="direction" placeholder="请选择">
              <el-option
                v-for="item in directionValue"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>录入人</span>
            <el-select v-model="user" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.creator"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </div>
        <div class="thrid_row">
          <el-col class="left_input">
            <span>题目备注</span>
            <el-input v-model="remarksValue" class="catalogue" />
          </el-col>
          <el-col class="left_input">
            <span>企业简称</span>
            <el-input v-model="shortName" class="catalogue" />
          </el-col>
          <div class="four_row">
            <el-col class="left_input">
              <span>城市</span>
              <el-select
                v-model.trim="form.provinces"
                placeholder="请选择"
                class="select_one"
                @change="changeFn"
              >
                <el-option
                  v-for="(item, index) in provincesList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-select v-model="form.citys" placeholder="请选择" class="select_one">
                <el-option
                  v-for="(item, index) in citysList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
          </div>
          <div class="two_button">
            <el-button @click="clearClick">清除</el-button>
            <el-button type="primary" @click="searchClick">搜索</el-button>
          </div>
        </div>

      </el-row>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="待审核" name="second" />
        <el-tab-pane label="已审核" name="third" />
        <el-tab-pane label="已拒绝" name="fourth" />
      </el-tabs>
      <div class="alert" closable="false">
        <el-alert :closable="false" :title="`数据一共${page.counts}条`" type="info" show-icon />
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120" />
        <el-table-column prop="subject" label="学科" width="80" />
        <el-table-column prop="catalog" label="目录" />
        <el-table-column prop="questionType" label="题型" width="70" />
        <el-table-column prop="question" label="题干" width="180">
          <template v-slot="{row}">
            <p v-html="row.question" />
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template v-slot="{row}">
            {{ row.addDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="70" />
        <el-table-column prop="creator" label="录入人" />
        <el-table-column prop="chkState" label="审核状态" />
        <el-table-column prop="chkRemarks" label="审核意见" width="120" />
        <el-table-column prop="chkUser" label="审核人" width="120" />
        <el-table-column prop="publishState" label="发布状态" width="110">
          <template v-slot="{row}">
            <span class="publishStateSpan">{{ row.publishState===1?'已下架':'已上架' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" sortable="" width="250">
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="preViewClick(row)">预览</el-button>
            <el-button type="text" size="small" :disabled="row.chkState === '已审核'?true:false" @click="checkClick(row)">审核</el-button>
            <el-button type="text" size="small" :disabled="row.publishState === 0?true:false" @click="$router.push('/testing/testInput')">修改</el-button>
            <el-button type="text" size="small" @click="putawayClick(row)">{{ row.publishState===0?'下架':'上架' }}</el-button>
            <el-button type="text" size="small" :disabled="row.publishState === 0?true:false" @click="deleteClick(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 放置分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height:60px">
        <el-pagination
          :current-page="page.page*1"
          :page-size="page.pagesize*1"
          :total="page.counts"
          layout="prev,pager,next"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <PreviewDialog :is-preview-dialog.sync="isPreviewDialog" :row-list="rowList" />
    <CheckDialog :is-check-dialog.sync="isCheckDialog" :check-row-list="checkRowList" />
  </div>
</template>

<script>
import { selectedListAPI, testingPutawayAPI, deleteBasisTestingAPI, getSubjectsAPI } from '@/api/index'
import { provinces, citys } from '@/assets/city'
import PreviewDialog from '../basisTesting/components/Preview-dialog.vue'
import CheckDialog from './components/check.vue'
export default {
  name: 'TableLayout',
	components: {
		PreviewDialog,
		CheckDialog
	},
  data() {
    return {
			isPreviewDialog: false,
			isCheckDialog: false,
      provincesList: provinces(), // 城市
      citysList: [], // 地区
      form: {
        provinces: '', // 城市
        citys: '' // 地区
      },
      activeNames: '',
      ruleForm: {},
      rules: {},
      subjectValue: '', // 学科绑定的数据
      twoSubjectValue: '', // 二级目录绑定的数据
      label: '', // 标签绑定的数据
      type: '', // 题型绑定的数据
      difficultyValue: '', // 难度绑定的数据
      direction: '', // 方向绑定的数据
      user: '', // 录入人绑定的数据
			remarksValue: '', // 题目备注绑定的数据
			keyword: '', // 关键字绑定的数据
			shortName: '', // 企业简称绑定的数据
      directionValue: [
        {
          id: '1',
          label: 'o2o'
        }, {
          id: '2',
          label: '外包服务'
        }, {
          id: '3',
          label: '企业服务'
        }, {
          id: '4',
          label: '互联网金融'
        }, {
          id: '5',
          label: '企业咨询'
        }, {
          id: '6',
          label: '互联网'
        }, {
          id: '7',
          label: '电子商务'
        }, {
          id: '8',
          label: '其他'
        }
      ],
			difficulty: [
        {
          id: '1',
          label: '简单'
        }, {
          id: '2',
          label: '一般'
        }, {
          id: '3',
          label: '困难'
        }
      ],
			questionType: [
        {
          id: '1',
          label: '单选'
        }, {
          id: '2',
          label: '多选'
        }, {
          id: '3',
          label: '简答'
        }
      ],

      tableData: [],
			value: '',
			page: { // 声明一个对象，保存分页的数据
				page: 1,
				pagesize: 10,
				counts: 0,
				pages: 0
			},
			rowList: {}, // 用来保存点击预览时当前行的数据
			checkRowList: {}, // 用来保存点击审核时当前行的数据
			activeName: 'first',
			twoSubjectValueArr: [], // 保存二级目录的数组
			tagsValue: []
    }
  },
	computed: {
		compChkState() {
			return (val) => {
				if (val === 0) {
					return '待审核'
				} else if (val === 1) {
					return '已审核'
				} else {
					return '已拒绝'
				}
			}
		}
	},
	created() {
		this.getSelectedList()
	},
  methods: {
		// 请求精选题库的数据列表
		async	getSelectedList() {
			const res = await selectedListAPI(this.page)
			const { counts, pagesize, pages, page, items } = res
			this.page.page = page
			this.page.pages = pages
			this.page.counts = counts
			this.page.pagesize = pagesize
			this.tableData = items
			// 转换难度
			this.transDifficulty()
			// 转换审核状态
			this.transChkState()
				// 转换题型
			this.transQuestionsType()
			// 二级目录的信息
			this.tableData.forEach(async item => {
				const res = await getSubjectsAPI(item.subjectID)
				res.forEach(item => {
					this.twoSubjectValueArr.push(item.label)
				})
			})

		},

		/**
		 * 点击分页按钮，切换分页
		 * **/
		changePage(newpage) {
			this.page.page = newpage
			this.getSelectedList()
		},
		/**
		 * 封装一些函数，定义一些功能
		 *
		 * **/
		// 封装转换难度的函数
		transDifficulty() {
			this.difficulty.forEach(item => {
					this.tableData.forEach(obj => {
						if (obj.difficulty === item.id) {
							obj.difficulty = item.label
						}
					})
			})
		},
		// 封装转换审核状态的函数
		transChkState() {
			this.tableData.forEach(item => {
				if (item.chkState === 0) {
					item.chkState = '待审核'
				} else if (item.chkState === 1) {
					item.chkState = '已审核'
				} else {
					item.chkState = '已拒绝'
				}
			})
		},
		// 封装转换题型的函数
		transQuestionsType() {
			this.tableData.forEach(item => {
				if (item.questionType === '1') {
						item.questionType = '单选题'
					} else if (item.questionType === '2') {
						item.questionType = '多选题'
					} else {
						item.questionType = '简答题'
				}
			})
		},
		//  选择城市的方法
    changeFn() {
      // 获取地区赋值给本地
      this.citysList = citys(this.form.provinces)
    },
		// 点击搜索按钮，根据条件搜索内容
		async searchClick() {
			const { counts, pagesize, pages, items } = await selectedListAPI({
				subjectID: this.subjectValue,
				tags: this.label,
				keyword: this.keyword,
				questionType: this.type,
				difficulty: this.difficultyValue,
				direction: this.direction,
				creatorID: this.user,
				remarks: this.remarksValue,
				shortName: this.shortName,
				province: this.form.provinces,
				city: this.form.citys
			})
				this.page.page = pages
				this.page.counts = counts
				this.page.pagesize = pagesize
				this.tableData = items
		},
		// 点击清除按钮，清除全部的搜索条件
		clearClick() {
				this.subjectValue = ''
				this.label = ''
				this.keyword = ''
				this.type = ''
				this.difficultyValue = ''
				this.direction = ''
				this.user = ''
				this.remarksValue = ''
				this.shortName = ''
				this.form.provinces = ''
				this.form.citys = ''
				this.twoSubjectValue = ''
				this.getSelectedList()
		},
		// 点击预览按钮，预览当前行的信息
		preViewClick(row) {
			console.log(row);
			this.rowList = row
			this.isPreviewDialog = true
		},
		// 点击审核按钮，审核当前行的数据
		checkClick(row) {
			this.checkRowList = row
			this.isCheckDialog = true
		},
		// 点击上架按钮，进行上架下架
		async putawayClick(row) {
			if (row.publishState === 0) {
				// 下架状态，点击上架
				row.publishState = 1
				await this.$confirm('确定要上架此题目吗？')
				await testingPutawayAPI(row.id, row.publishState)
				this.$message.success('上架成功')
				this.getSelectedList()
			} else {
				// 上架状态，点击下架
				row.publishState = 0
				await this.$confirm('确定要下架此题目吗？')
				await testingPutawayAPI(row.id, row.publishState)
				this.$message.success('下架成功')
				this.getSelectedList()
			}
		},
		// 点击删除按钮，删除当前行的数据(就是删除基础题库的数据)
		async deleteClick(row) {
			try {
				await this.$confirm('确定要删除当前试题吗?')
				await deleteBasisTestingAPI(row.id)
				this.$message.success('删除成功!')
				this.getSelectedList()
			} catch (err) {
				console.log(err);
			}

		},
		// #region
		// 点击tabs标签按钮，实现不同数据的显示功能
		// async handleClick1(tab, event) {
		// 	// #region
		// 	// this.getSelectedList()
		// 	// const arr1 = []// 放置待审核的数据
		// 	// const arr2 = []// 放置已审核的数据
		// 	// const arr3 = []// 放置已拒绝的数据
		// 	// console.log(tab.index);
		// 	// if (tab.index === '0') {
		// 	// 	// 直接退出，展示全部
		// 	// 	return
		// 	// } else if (tab.index === '1') {
		// 	// 	this.tableData.forEach(item => {
		// 	// 		console.log(item);
		// 	// 		if (item.chkState === '待审核') {
		// 	// 			return arr1.push(item)
		// 	// 		}
		// 	// 	})
		// 	// 	this.tableData = arr1
		// 	// } else if (tab.index === '2') {
		// 	// 	this.tableData.forEach(item => {
		// 	// 		if (item.chkState === '已审核') {
		// 	// 			return arr2.push(item)
		// 	// 		}
		// 	// 	})
		// 	// 	this.tableData = arr2
		// 	// } else if (tab.index === '3') {
		// 	// 	this.tableData.forEach(item => {
		// 	// 		if (item.chkState === '已拒绝') {
		// 	// 			return arr3.push(item)
		// 	// 		}
		// 	// 	})
		// 	// this.tableData = arr2
		// 	// }
		// 	// #endregion

		// 	if (tab.index === '0') {
		// 		const { counts, items } = await selectedListAPI(this.page)
		// 		this.page.counts = counts
		// 		this.tableData = items
		// 	} else if (tab.index === '1') {
		// 		const { counts, items } = await selectedListAPI({ // 待审核
		// 			page: this.page.page,
		// 			chkState: 0
		// 		})
		// 		this.page.counts = counts
		// 		this.tableData = items
		// 	} else if (tab.index === '2') {
		// 		const { counts, items } = await selectedListAPI({ // 已审核
		// 			page: this.page.page,
		// 			chkState: 1
		// 		})
		// 		this.page.counts = counts
		// 		this.tableData = items
		// 	} else if (tab.index === '3') {
		// 		const { counts, items } = await selectedListAPI({ // 已拒绝
		// 			page: this.page.page,
		// 			chkState: 2
		// 		})
		// 		this.page.counts = counts
		// 		this.tableData = items
		// 	}

		// 	// 将难度、审核状态、题型转换为文字
		// 	this.transDifficulty()
		// 	this.transChkState()
		// 	this.transQuestionsType()
		// },
		// #endregion

		async handleClick({ index }) {
			const newIdx = index * 1
			const page = this.page.page;
			let obj = {}
			let chkState = 0
			chkState = newIdx - 1
			if (newIdx === 0) {
				obj = this.page;
			} else {
				obj = { page, chkState }
			}
			const { counts, items } = await selectedListAPI(obj)
				this.page.counts = counts
				this.tableData = items
			// 将难度、审核状态、题型转换为文字
			// this.transDifficulty()
			// this.transChkState()
			// this.transQuestionsType()
		},
		// 点击新增文章按钮，跳转路由到试题录入
		dropClick() {
			this.$router.push('/testing/testInput')
		}
  }
}
</script>
<style lang='scss' scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 3px;
}
.one_button{
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding-right: 22px;
}
.left_input{
	float: left;
	width: 260px;
	span{
		font-size: 15px;
		font-weight: normal;
	}
}
span{
	font-weight: 600;
	margin-right: 20px;
}
::v-deep .el-input{
	width: 200px;
	height: 50px;
}
.right_select{
	float: left;
	width: 260px;
}
.right_select span{
	font-size: 15px;
	font-weight: normal;
}
.right_button{
	float: right;
	width: 32px;
	margin-right: 80px;
}
::v-deep .el-input__inner{
		// width: 200px;
	height: 30px;
}
::v-deep .el-select__caret{
	line-height: 30px;
}
.first_row{
	width: 100%;
	height: 50px;
	line-height: 50px;
	.right_select, .left_input{
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.two_row{
	width: 100%;
	height: 50px;
		line-height: 50px;

	.right_select, .left_input{
		float: left;
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.thrid_row{
	overflow: hidden;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 10px;
	.right_select, .left_input{
		float: left;
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.four_row{
	width: 28%;
	height: 50px;
	float: left;
	.left_input{
		float: left;
		width: 100%;
		.select_one, .select_two{
			width: 100px;
			margin-right: 4px;
			::v-deep .el-input{
				width: 100px !important;
			::v-deep .el-input__inner{
				width: 100px !important;
			}
			}
		}
	}
}
.two_button{
	width: 160px;
	height: 50px;
	float: right;
	margin-right: 27px;
}
.publishStateSpan{
	font-weight: normal;
}
</style>

